<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="top">
			<view class="left">
			</view>
			<view class="center">
				早上好！张三先生
			</view>
			<view class="right">
				<uni-badge class="uni-badge-left-margin" text="20" absolute="rightTop" size="small" :offset="[6, 6]"
					:custom-style="{border:'none'}">
					<uni-icons type="notification" color="#6ba509" size="30"></uni-icons>
				</uni-badge>
			</view>
		</view>
		<!-- 轮播图 -->
		<uni-swiper-dot :info="info" :current="current" mode="dot" :dotsStyles="dotsStyles" >
		<swiper class="uni-swiper-wrapper"  circular  :autoplay="autoplay" :interval="interval"
			:duration="duration" @change="change">
			<swiper-item v-for="(item,index) in info" :key="index">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		</uni-swiper-dot>
		<!-- 功能1 -->
		<view class="nav" >
			<view class="nav-item" v-for="(item,index) in nav" :key="index">
				<image src="../../static/logo.png" mode=""></image>
				<view class="nav-txt">
					功能{{index+1}}
				</view>
			</view>
		</view>
		<!-- 功能2 -->
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" @click="hq(item)">
			<image src="../../static/logo.png" mode=""></image>	
			<view class="list-txt">
				{{item}}
			</view>
			</view>
		</view>
		<tab tabindex="0"></tab>
		<tc :state="state" @clone="clone"></tc>
	</view>
</template>

<script>
	import tab from '@/components/tab.vue'
	import tc from '@/components/tc.vue'
	export default {
		components:{
			tab,
			tc
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current:0,
				info: [
				'https://img0.baidu.com/it/u=769000522,1911977345&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
				'https://img2.baidu.com/it/u=632570491,3587894932&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				'https://img0.baidu.com/it/u=1960478523,235377321&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				'https://img0.baidu.com/it/u=769000522,1911977345&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
				],
				dotsStyles:{
					selectedBackgroundColor:'#6ba509',
					selectedBorder:'1px rgba(136, 191, 2, 1.0) solid',
					backgroundColor:'rgba(0, 0, 0, 0)',
					border:'1px rgba(136, 191, 2, 1.0) solid'
				},
				nav:[],
				list:[
					'功能A',
					'功能B',
					'功能C',
					'功能D',
					'功能E',
					'功能F',
					'功能G',
					'功能H',
					'功能I',
					'功能J',
				],
				state:false
			}
		},
		onLoad() {
				this.nav.length = 5
		},
		methods: {
				change(e) {
					this.current = e.detail.current;
				},
				hq(item){
					if(item == '功能B'){
						this.state= true
					}
				},
				clone(){
					this.state =false
				}
			}
	}
</script>

<style lang="less" scoped>
	.top {
		display: flex;
		justify-content: space-around;
		height: 250rpx;
		align-items: center;
		width: 100%;
		background-color: #272a3b;
		box-sizing: border-box;
		padding-top: 120rpx;
		color: #6ba509;

		.left,
		.right {
			width: 50rpx;
			height: 40rpx;
		}

		.center {
			font-size: 40rpx;
			color: #6ba509;
			height: 40rpx;
		}
	}
	swiper{
		width: 100%;
		height: 300rpx;
		swiper-item{
			height: 100%;
			width: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	 .nav{
		 display: flex;
		 justify-content: space-around;
		 height: 180rpx;
		 align-items: center;
		 background: #272a3b;
		 .nav-item{
			 text-align: center;
			 color: #9c9da7;
			 font-size: 22rpx;
		 }
		 image{
			 width: 80rpx;
			 height: 80rpx;
		 }
	 }
	 .list{
		 margin-top: 20rpx;
		 display: flex;
		 flex-wrap: wrap;
		 .list-item{
			 background: #fff;
			 color: #9c9da7;
			 border: 1rpx solid #dfe1ee;
			 box-sizing: border-box;
			 padding-top: 35rpx;
			 width: 25%;
			 height: 220rpx;
			 text-align: center;
			 border-top: none;
		 }
		 .list-txt{
			 width: 100%;
			 text-align: center;
		 }
		 image{
			 width: 100rpx;
			 height: 100rpx;
			 
		 }
	 }
</style>